<template>
  <div class="header" :class="{ header_show: headerShow, shadow: headerShowActive }">
    <div class="banner-box">
		<div class='banner-container'>
			<!-- <img class='banner-img' src='../../public/img/banner.png' /> -->
			<h2>河北省职业技能公共实训基地网培学院</h2>
			<p>河北基地专属网络云平台，搭建多种类型网络培训功能</p>
		</div>
		<div class='date-box'><span id='cur-date'>{{ curDate }}</span></div>
		<div class='help-box'>
			<a-button size="small"  danger @click="toHelp" class="helpBtn">帮助中心</a-button>
			<a-space warp v-if="!loginState">
			  <a-button size="small" type="primary" danger @click="toLogin" class="logBtn">登录</a-button>
			  <!-- <a-button size="small" danger @click="toRegister" class="regBtn">注册</a-button> -->
			</a-space>
			<template v-else>
			  <a-dropdown>
			    <a class="ant-dropdown-link" @click.prevent>
			      <div style="display: flex;">
			        <div style="margin: 0 10px">
			          <a-avatar v-if="userInfo.avatar" :size="40" :src="getFile(userInfo.avatar)" />
					  <a-avatar v-else :size="40" :src="userDefaultImg" />
					  <!-- 2025/10/blob_1761300518627.jpg -->
			        </div>
			        <template v-if="userInfo?.realname">
			          <div class="realname" v-if="userInfo?.realname.length < 4">
			            {{ userInfo?.realname }}
			          </div>
			          <div class="realname" v-else>{{ userInfo?.realname?.substring(0, 4) }}</div>
			        </template>
			      </div>
			    </a>
			    <template #overlay>
			      <a-menu>
					<a-menu-item>
					   
						  <router-link :to="'/userCenter'" >
						    <span>个人中心</span>
						  </router-link>
					</a-menu-item>
			        <a-menu-item>
			          <a-popconfirm title="确定退出登录吗？" ok-text="退出" cancel-text="取消"
			                        @confirm="logout">
			            <a href="#">
			              <LogoutOutlined style="margin-right: 5px" />
			              退出登录</a>
			          </a-popconfirm>
			        </a-menu-item>
			      </a-menu>
			    </template>
			  </a-dropdown>
			</template>
		</div>
	</div>
	<div class="nav-box">
		<div class="menu-wrapper">
		  <div class="menu-item" v-for="(nav, index) in navList" :key="index">
		    <h2 class="menu-item-link">
		      <router-link :to="nav.path" :class="currentModel == nav.path? 'active':''">
		        <span>{{ nav.name }}</span>
		      </router-link>
		    </h2>
		  </div>
		</div>
	</div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { useWebStore } from "@/store";
import { useRouter } from "vue-router";
import { LogoutOutlined, SearchOutlined } from "@ant-design/icons-vue";
import EmptyData from "@/components/public/EmptyData.vue";
import Pagination from "@/components/Pagination.vue";
import { addKeyword, getSearchList, hotSearchCount, mySearchHistory } from "@/api/search";
import SearchList from "@/components/search/SearchList.vue";
import userDefaultImg from "@/assets/img/blob.jpg";

const total = ref<number>(0);
const hotSearchList = ref<any>([]);
const mySearchHistoryList = ref<any>([]);
const loadingKeyword = ref<boolean>(false);
const showSearch = ref<any>(false);
const searchItems = ref<any>({});
const router = useRouter();
const webStore = useWebStore();
const headerShowActive = computed(() => webStore.headerShadowActive);
const headerShow = computed(() => webStore.headerShow);
const currentModel = computed(() => webStore.currentModel);
const loginState = computed(() => webStore.getLoginState);
const navList = ref<any>([
  {
    "path": "/index",
    "name": "网站首页"
  },
  {
    "path": "/about",
    "name": "平台概况"
  },
  {
    "path": "/course",
    "name": "课程资源"
  },
  {
    "path": "/exam",
    "name": "在线考试"
  },
  {
    "path": "/practice",
    "name": "题库练习"
  },
  {
    "path": "/news",
    "name": "新闻资讯"
  },
  {
    "path": "/training",
    "name": "培训项目"
  },
  {
    "path": "/contact",
    "name": "联系我们"
  },
  // {
  //   "path": "/userCenter",
  //   "name": "个人中心"
  // },
  // {
  //   "path": "/chatGPT",
  //   "name": "智能助手"
  // }
]);
const curDate = getDate();
const userInfo = ref<any>({});

const loading = ref<boolean>(false);

const pageInfo = ref<{
  pageNo: number;
  pageSize: number;
  keyword: string;
  searchType: string;
}>({
  // 当前页码
  pageNo: 1,
  // 当前每页显示多少条数据
  pageSize: 30,
  keyword: "",
  searchType: ""
});

watch(loginState, async (newValue, oldValue) => {
  if (!newValue) {
    userInfo.value = {};
  } else {
    userInfo.value = webStore.getUserInfo;
  }
}, { immediate: true, deep: true });

function toLogin() {
  router.push({ path: `/login` });
}

function toHelp() {
  router.push({ path: `/help` });
}

function toRegister() {
  router.push({ path: `/register` });
}

async function logout() {
  webStore.userLogout();
  await router.push("/index");
}

async function handleCommonSearch(keyword) {
  pageInfo.value.keyword = keyword;
  pageInfo.value.pageNo = 1;
  pageInfo.value.searchType = "";
  showSearch.value = true;
  await getSearchItems();
}

async function handleSearch() {
  if (!pageInfo.value.keyword) {
    return;
  }
  pageInfo.value.pageNo = 1;
  pageInfo.value.searchType = "";
  showSearch.value = true;
  await getSearchItems();
  addKeyword(pageInfo.value.keyword);
}

async function getSearchItems() {
  loading.value = true;
  try {
    const data: any = await getSearchList(pageInfo.value);
    searchItems.value = data.result?.groupBy;
    const newHtml = `<span style="color: red">${pageInfo.value.keyword}</span>`;
    for (let prop in searchItems.value) {
      const itemList: any = searchItems.value[prop];
      if (itemList?.length > 0) {
        itemList.forEach((item: any) => {
          item.title = item.title.replace(pageInfo.value.keyword, newHtml);
        });
      }
    }

    total.value = data.result?.pageList?.total;
  } finally {
    loading.value = false;
  }
}

async function handleFocus() {
  loadingKeyword.value = true;
  try {
    const hotData: any = await hotSearchCount(5);
    hotSearchList.value = hotData.result;
    const historyData: any = await mySearchHistory();
    mySearchHistoryList.value = historyData.result;
  } finally {
    loadingKeyword.value = false;
  }
}

function changePage(pageNo) {
  pageInfo.value.pageNo = pageNo;
  getSearchItems();
}

function changeSearchType(type) {
  pageInfo.value.pageNo = 1;
  pageInfo.value.searchType = type;
  getSearchItems();
}


function getDate(){
	const currentDate = new Date();
	const curYear = currentDate.getFullYear();
	const curMonth = currentDate.getMonth()+1;
	const curDay = currentDate.getDate();
	return curYear+'年'+curMonth+'月'+curDay+'日';
}

</script>
<style lang="less" scoped>
@nav_active_color: #fe9d38;

.ant-divider-horizontal {
  margin: 8px 0;
}

h2 {
  margin: 0;
}

.header_show {
  transform: translateY(-62px);
}

.a_text_dark {
  color: rgba(0, 0, 0, .8);
}

.header {
  width: 100%;
  box-shadow: none;
  color: #FFF;
  .banner-box {
	position:relative;
    .banner-container{
		position:relative;
		padding-top:10%;
		padding-bottom:40px;
		background-image:url('../../public/img/banner.png');
		background-size:100% 100%;
		
		.banner-img{
			position:absolute;
			top:0;
			left:0;
			width:100%;height:auto;
		}
		h2{
			text-align:center;
			font-size:44px;
			color:#345da9;
			font-weight:600;
		}
		p{
			margin-top:30px;
			text-align:center;
			font-size:28px;
			color:#345da9;
		}
	}
	.date-box{
		position:absolute;
		top:15px;
		left:5%;
		#cur-date{
			color:#ffffff;
			font-size:18px;
		}
	}
	.help-box{
		position:absolute;
		top:15px;
		right:5%;
		.helpBtn{
			background:none;
			box-shadow: 0 2px 0 rgba(255, 38, 5, 0.06);
			color:#ffffff;
			border:none;
		}
		.logBtn{
			margin-left:10px;
			background:none;
		}
		.regBtn{
			background:none;
			box-shadow: 0 2px 0 rgba(255, 38, 5, 0.06);
			color:#ffffff;
			border:none;
		}
	}
  }
  .nav-box{
	  width:100%;
	  height:60px;
	  background-color:rgba(74,138,226,1);
	  .menu-wrapper{
		  width:1200px;
		  margin:0 auto;
	  }
  }
}

.shadow {
  background-color: rgba(255, 255, 255, .7);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
}


.menu-wrapper {
  display: flex;
  flex-direction: row;
  list-style: none;
  -ms-flex-align: center;
  align-items: center;
  padding: 0;
  margin: 0 0 0 100px;
  position: relative;

  .menu-item {
    flex-shrink: 0;
	width:12.5%;
  }

  // > .menu-item + .menu-item {
  //   margin-left: 50px;
  // }

  .menu-item-link {
    color: #FFF;
    font-weight: 400;
    font-size: 16px;
    line-height: 55px;
    cursor: pointer;
    position: relative;
	.active{
		span:after{
			position:relative;
			margin:0 auto;
			left:0;
		}
	}
  }
}

a {
  display: inline-block;
  color: #FFF;
  transition: color .3s;
}

a:hover {
  color: #fe9d38;
}

.active {
  color: @nav_active_color !important;
  font-weight: 600;

  span:after {
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    width: 26px;
    left: calc(50% - 13px);
    bottom: 2px;
    background-color: @nav_active_color;
  }
}

.nav_text_white {
  color: rgba(255, 255, 255, 1);
}

.nav_text_dark {
  color: rgba(0, 0, 0, .8);
}

@media only screen and (max-width: 991px) {
  .header_content {
  }
}

.realname {
  margin-left: 10px;
  line-height:40px;
  color: #FFF;
  font-size: 16px;
}

.flex_start {
  display: flex;
  justify-content: flex-start;;
}

.flex_between {
  display: flex;
  justify-content: space-between;
}

.searchBar {
  margin-right: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.searchTitle {
  font-size: 14px;
  color: red;
  margin-bottom: 10px;
}
</style>
